<template>
  <view class="page-container">
    <!-- 顶部导航栏 -->
    <uni-nav-bar
      :border="false"
      title="等级权益说明"
      fixed
      left-icon="back"
      @clickLeft="goBack"
    />

    <view class="content">
      <!-- 金牌商家 -->
      <view class="level-card gold">
        <view class="level-header">
          <text class="level-title">金牌商家</text>
          <image src="/static/logo.png" class="level-icon" mode="aspectFit" />
        </view>
        <view class="level-rights">
          <view
            v-for="(item, index) in goldRights"
            :key="index"
            class="right-item"
          >
            <text class="right-index">{{ index + 1 }}.</text>
            <text class="right-text">{{ item }}</text>
          </view>
        </view>
      </view>

      <!-- 银牌商家 -->
      <view class="level-card silver">
        <view class="level-header">
          <text class="level-title">银牌商家</text>
          <image src="/static/logo.png" class="level-icon" mode="aspectFit" />
        </view>
        <view class="level-rights">
          <view
            v-for="(item, index) in silverRights"
            :key="index"
            class="right-item"
          >
            <text class="right-index">{{ index + 1 }}.</text>
            <text class="right-text">{{ item }}</text>
          </view>
        </view>
      </view>

      <!-- 铜牌商家 -->
      <view class="level-card bronze">
        <view class="level-header">
          <text class="level-title">铜牌商家</text>
          <image src="/static/logo.png" class="level-icon" mode="aspectFit" />
        </view>
        <view class="level-rights">
          <view
            v-for="(item, index) in bronzeRights"
            :key="index"
            class="right-item"
          >
            <text class="right-index">{{ index + 1 }}.</text>
            <text class="right-text">{{ item }}</text>
          </view>
        </view>
      </view>

      <!-- 评级打分规则 -->
      <view class="rules-section">
        <view class="rules-title">
          <view class="title-line"></view>
          <text class="title-text">评级打分规则</text>
          <view class="title-line"></view>
        </view>

        <view class="rules-list">
          <view v-for="(rule, index) in rules" :key="index" class="rule-item">
            <text class="rule-label">{{ rule.label }}：</text>
            <text class="rule-desc">{{ rule.desc }}</text>
          </view>
        </view>

        <!-- 等级积分说明 -->
        <view class="score-rules">
          <view
            v-for="item in scoreRules"
            :key="item.level"
            class="score-rule-item"
          >
            <text class="score-level">{{ item.level }}：</text>
            <text class="score-range">{{ item.range }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";

// 金牌商家权益
const goldRights = ref([
  "我店平台统一展示官方权威认证金牌标识",
  "平台专题活动免费曝光资源与参与资格",
  "平台各大促活动优先报名及享用资格",
  "品质好店专区优先推荐",
]);

// 银牌商家权益
const silverRights = ref([
  "我店平台统一展示官方权威认证银牌标识",
  "平台专题活动免费曝光资源与参与资格",
  "平台各大促活动优先报名及享用资格",
  "到达金牌商家被降级",
]);

// 铜牌商家权益
const bronzeRights = ref([
  "我店平台统一展示官方权威认证铜牌标识",
  "到达金牌商家被降级",
  "到达金牌商家被降级",
]);

// 评级打分规则
const rules = ref([
  {
    label: "考核项一",
    desc: "30天内积分总量达到30000分以上，即可得该项权重分20分，按实际积分计算该项得分",
  },
  {
    label: "考核项二",
    desc: "30天内订单总量达到300单及以上，即可得该项权重分20分，按实际订单单量计算该项得分",
  },
  {
    label: "考核项三",
    desc: "30天内消费用户数达到300位及以上，即可得该项权重分20分，按实际消费用户数累计算该项得分",
  },
  {
    label: "考核项四",
    desc: "30天内店铺新增粉丝数达到20位及以上，即可得该项权重分10分，按实际新增粉丝数累计算该项得分",
  },
  {
    label: "考核项五",
    desc: "店铺近30天满意度、完成信息填写确保信息完整性该项权重分10分，任务制、每完成一项得权重分50%，任务一：设置店铺营业时间，任务二：设置店铺联系方式",
  },
  {
    label: "考核项六",
    desc: "店铺评分0~3分，即可得该项权重分6分。3分~5分即可得该项权重分10分",
  },
  {
    label: "考核项七",
    desc: "商品数量，该功能后续添加，暂不考核直接给结果分3分",
  },
  {
    label: "考核项八",
    desc: "商品销量，该功能后续添加，暂不考核直接给结果分3分",
  },
]);

// 等级积分说明
const scoreRules = ref([
  { level: "金牌商家", range: "权重分>=90分" },
  { level: "银牌商家", range: "75分<权重分<90分" },
  { level: "铜牌商家", range: "60分<权重分<75分" },
  { level: "普通商家", range: "60分以下" },
]);

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.scroll-content {
  flex: 1;
  height: 0;
  margin-top: 88rpx;
}

.content {
  padding: 20rpx 30rpx 40rpx 30rpx;
}

// 等级卡片
.level-card {
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;

  &.gold {
    background: linear-gradient(135deg, #d4a574 0%, #f4d79e 50%, #d4a574 100%);
    color: #7d5c30;
  }

  &.silver {
    background: linear-gradient(135deg, #b8c5d6 0%, #dfe5ed 50%, #b8c5d6 100%);
    color: #5a6b7d;
  }

  &.bronze {
    background: linear-gradient(135deg, #c9905e 0%, #e4b88a 50%, #c9905e 100%);
    color: #7d5630;
  }
}

.level-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}

.level-title {
  font-size: 36rpx;
  font-weight: 700;
}

.level-icon {
  width: 80rpx;
  height: 80rpx;
}

.level-rights {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.right-item {
  display: flex;
  gap: 8rpx;
  line-height: 1.6;
}

.right-index {
  font-size: 26rpx;
  flex-shrink: 0;
}

.right-text {
  font-size: 26rpx;
  flex: 1;
}

// 评级打分规则
.rules-section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
}

.rules-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20rpx;
  margin-bottom: 30rpx;
}

.title-line {
  flex: 1;
  height: 2rpx;
  background: linear-gradient(
    to right,
    transparent,
    #ff9900 50%,
    transparent 100%
  );
}

.title-text {
  font-size: 32rpx;
  font-weight: 700;
  color: #333;
  white-space: nowrap;
}

.rules-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
  margin-bottom: 30rpx;
}

.rule-item {
  display: flex;
  gap: 8rpx;
}

.rule-label {
  font-size: 26rpx;
  color: #333;
  font-weight: 600;
  flex-shrink: 0;
}

.rule-desc {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
  flex: 1;
}

// 等级积分说明
.score-rules {
  border-top: 2rpx solid #f0f0f0;
  padding-top: 24rpx;
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.score-rule-item {
  display: flex;
  gap: 8rpx;
  font-size: 26rpx;
}

.score-level {
  color: #333;
  font-weight: 600;
  flex-shrink: 0;
}

.score-range {
  color: #666;
}
</style>
